<template>
  <NuxtLayout name="admin" menuActive="/admin">
    <ul class="data_ul">
      <li class="data_ul_li">
        <div class="data_ul_li_title">班级总数</div>
        <div class="data_ul_li_num">{{ countData.classesCount }}</div>
        <div class="data_ul_li_desc">近七日添加<span>{{ countData.classesCount7days }}</span>个班级</div>
      </li>
      <li class="data_ul_li">
        <div class="data_ul_li_title">学员总数</div>
        <div class="data_ul_li_num">{{ countData.userCount }}</div>
        <div class="data_ul_li_desc">近七日<span>{{ countData.userCount7days }}</span>人报名</div>
      </li>
      <li class="data_ul_li">
        <div class="data_ul_li_title">学员模拟考试人次</div>
        <div class="data_ul_li_num">{{ countData.examCount }}</div>
        <div class="data_ul_li_desc">近七日线上考试<span>{{ countData.examCount7days }}</span>人次</div>
      </li>
      <li class="data_ul_li">
        <div class="data_ul_li_title">学员获取学时总数</div>
        <div class="data_ul_li_num">{{ countData.hoursCount }}</div>
        <div class="data_ul_li_desc">近七日模拟考试<span>{{ countData.hoursCount7days }}</span>人次</div>
      </li>
    </ul>
    <div class="charts">
      <div ref="classChart" style="width: 100%;height: 400px;"></div>
    </div>
    <div class="charts_box">
      <div class="charts" style="width: 360px;margin-right: 20px;">
        <div ref="examChart" style="width: 100%;height: 300px;"></div>
      </div>
      <div class="charts" style="flex: 1;">
        <div ref="studyChart" style="width: 100%;height: 300px;"></div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import * as echarts from 'echarts';
import { statisticTotal, userTrendChart, statisticExam, statisticLearn } from '~/server/api'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_机构统计",
  keywords: "技考邦,机构统计",
  description: "技考邦，机构统计。",
  ogTitle: "技考邦_机构统计",
  ogDescription: "技考邦，机构统计。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
})
// 获取统计
const countData = ref({})
const getCount = async () => {
  let { data: countRes } = await useAsyncData('statisticTotal', () => useServerRequest(statisticTotal, {
    method: 'get'
  }))
  if (countRes.value && countRes.value.errno === 0) {
    countData.value = countRes.value.result;
  }
}
getCount()
// 图表
let classChart = ref(null)
let examChart = ref(null)
let studyChart = ref(null)
// 获取班级学员统计
const getClassStudent = async () => {
  let { errno, errmsg, result } = await useServerRequest(userTrendChart, {
    method: 'get'
  })
  if (errno === 0) {
    let newData = result.filter((x, i) => i < 5);
    if (newData.length > 0) {
      newData.forEach(item => {
        item.name = item.classesName,
          item.type = 'line',
          item.stack = 'Total',
          item.data = item.userCountList.map(x => x.userCount)
      })
    }
    let charts1 = echarts.init(classChart.value)
    charts1.setOption({
      title: {
        text: '班级学员数据',
        top: '11px',
        left: '11px'
      },
      legend: {
        top: '11px',
        data: newData.map(x => x.classesName)
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: newData.length > 0 && newData[0].userCountList ? newData[0].userCountList.map(x => x.month) : []
      },
      yAxis: {
        type: 'value'
      },
      series: newData
    })
  }
}
// 模拟考试数据
const getExam = async () => {
  let { errno, errmsg, result } = await useServerRequest(statisticExam, {
    method: 'get'
  })
  if (errno === 0) {
    result.forEach(item => {
      item.value = item.count;
      item.name = item.grade;
    })
    let charts2 = echarts.init(examChart.value);
    charts2.setOption({
      title: {
        text: '模拟考试数据',
        top: '11px',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '学员分数统计',
          top: '10%',
          type: 'pie',
          radius: '60%',
          data: result,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
}
// 学习统计
const getLearn = async () => {
  let { errno, errmsg, result } = await useServerRequest(statisticLearn, {
    method: 'get'
  })
  if (errno === 0) {
    // 只取前5条数据
    let newData = result.filter((x, i) => i < 5)
    let charts3 = echarts.init(studyChart.value);
    charts3.setOption({
      title: {
        text: '学习数据',
        left: 'center',
        top: '11px'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: newData.map(x => x.classesName)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: newData.map(x => x.progress * 100),
          type: 'bar'
        }
      ]
    })
  }
}
onMounted(() => {
  getClassStudent()
  getExam()
  getLearn()
})
</script>

<style lang="less" scoped>
.data_ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  &_li {
    width: calc(100% / 4 - 15px);
    height: 100px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #EEEEEE;

    &_title {
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      height: 35px;
      line-height: 35px;
      border-bottom: 1px solid #EEE;
      padding: 0 11px;
    }

    &_num {
      font-weight: bold;
      font-size: 18px;
      color: #333333;
      height: 39px;
      line-height: 39px;
      text-align: center;
      padding: 0 11px;
    }

    &_desc {
      font-size: 14px;
      color: #333333;
      text-align: right;
      padding: 0 11px;

      span {
        color: #2C6EFF;
        font-size: 14px;
      }
    }
  }
}

.charts {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #EEEEEE;
  position: relative;

  &_select {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 50%;
    z-index: 10;
  }
}

.charts_box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>